<template>
	<!-- <basic-container> -->
	<div class="menu">
		<!-- 搜索条件 -->
		<yd-form class="yd-form-wraper" :model="queryParams" :options="formOptions">
			<template #form-btn>
				<el-button type="primary" @click="getList">查询</el-button>
				<!-- <el-button v-if="permissions.sys_menu_add" type="primary" @click="addOrUpdateHandle(false)"> 添加 </el-button> -->
			</template>
		</yd-form>
		<el-table v-loading="loading" border :data="menuList" row-key="id" :tree-props="{ children: 'children', hasChildren: 'hasChildrens' }">
			<el-table-column prop="name" label="菜单名称" :show-overflow-tooltip="true" width="180"></el-table-column>
			<el-table-column prop="icon" label="图标" align="center" width="100">
				<template #default="scope">
					<el-icon size="20" color="red" name="plus"></el-icon>
				</template>
			</el-table-column>
			<el-table-column prop="sortOrder" label="排序" width="60"></el-table-column>
			<el-table-column prop="path" label="组件路径" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column prop="menuType" label="类型" width="80" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.menuType === '0'" type="success">左菜单</el-tag>
					<el-tag v-if="scope.row.menuType === '2'" type="success">顶菜单</el-tag>
					<el-tag v-if="scope.row.menuType === '1'" type="info">按钮</el-tag>
					<el-tag v-if="scope.row.menuType === '3'" type="primary">隐藏菜单</el-tag>
					<el-tag v-if="scope.row.menuType === '4'" type="primary">外部菜单</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="keepAlive" label="缓冲" width="80" align="center">
				<template #default="scope">
					<el-tag v-if="scope.row.keepAlive === '0'" type="info">关闭</el-tag>
					<el-tag v-if="scope.row.keepAlive === '1'" type="success">开启</el-tag>
				</template>
			</el-table-column>
			<el-table-column prop="permission" label="权限标识" :show-overflow-tooltip="true"></el-table-column>
			<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
				<template #default="scope">
					<el-button
						v-if="permissions.sys_menu_add"
						size="small"
						type="text"
						icon="el-icon-plus"
						@click="addOrUpdateHandle(false, scope.row.id)"
						>新增
					</el-button>
					<el-button
						v-if="permissions.sys_menu_edit"
						size="small"
						type="text"
						icon="el-icon-edit"
						@click="addOrUpdateHandle(true, scope.row.id)"
						>修改
					</el-button>
					<el-button v-if="permissions.sys_menu_del" size="small" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)"
						>删除
					</el-button>
				</template>
			</el-table-column>
		</el-table>

		<table-form v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getList"></table-form>
	</div>
	<!-- </basic-container> -->
</template>

<script setup lang="ts">
import { delObj, fetchMenuTree } from '@/api/admin/menu';
import TableForm from './menu-form.vue';
import useUserStore from '@/store/modules/userinfo';
import { ref, reactive, onMounted, nextTick } from 'vue';
import useCurrentInstance from '@/utils/useCurrentInstance';

const { proxy } = useCurrentInstance();
const addOrUpdate = ref();
const addOrUpdateVisible = ref(false);
const loading = ref(true);
const menuList = ref<any[]>([]);
const menuOptions = ref<any[]>([]);
const queryParams = reactive<anyObj>({
	parentId: undefined,
	menuName: '',
});

// 表单项配置
const formOptions = ref<FormOptionType>([
	{
		type: 'input',
		label: '菜单名称',
		prop: 'menuName',
	},
]);

const permissions = useUserStore().permissions;
onMounted(() => {
	getList();
});
function addOrUpdateHandle(isEdit: any, id?: any) {
	addOrUpdateVisible.value = true;
	nextTick(() => {
		addOrUpdate.value?.init(isEdit, id);
	});
}
function getList() {
	loading.value = true;
	fetchMenuTree(queryParams).then((response: ApiResponse) => {
		menuList.value = response.data;
		loading.value = false;
	});
}
function handleDelete(row: any) {
	proxy.$modal
		.confirm('是否确认删除名称为"' + row.name + '"的数据项?', '警告', {
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		})
		.then(function () {
			delObj(row.id).then((res: ApiResponse) => {
				if (res.code === 0) {
					getList();
					proxy.$modal.msgSuccess('删除成功');
					return;
				}
				let msg = res.msg || '删除失败';
				proxy.$modal.msgWarning(msg);
			});
		});
}
</script>
